<template>
  <div>
    这里是首页
    <el-button type="primary">按钮</el-button>
  </div>
  <div v-for="item in list" :key="item.id" class="item">
    <div v-text="item.name" />
    <div v-text="item.content" />
  </div>
  ==================23=============
  <div v-for="item in list2" :key="item.id" class="item">
    <div v-text="item.name" />
    <div v-text="item.content" />
  </div>
</template>

<script setup>
import { getNews } from "~/api/news";

const list = ref([])
const list2 = ref([])

const fetchList = async () => {
  const res = await getNews({ page: 1, perPage: 10 })
  console.log(res.data.value);
  return res
}

const { data } = await useAsyncData('news',
  () => $fetch('http://127.0.0.1:4523/m1/3860526-0-default/api/v1/news', {
    params: {
      page: 1,
      perPage: 10
    }
  }))

const { data: news2 } = await useAsyncData('news2',
  () => $fetch('http://127.0.0.1:4523/m1/3860526-0-default/api/v1/news', {
    params: {
      page: 1,
      perPage: 10
    }
  }))

list.value = data.value.data
list2.value = news2.value.data
// onMounted(async () => {
//   const res = await fetchList();
//   list2.value = res.data.value.data
//   console.log(res.data.value.data);
// });

</script>

<style lang="scss" scoped>
.item {
  width: calc(100% - 40px);
  margin: 20px;
  border: 1px solid #ccc;
}
</style>